<template>
	<Card title="表头分组" style="margin-top: 24px">
		<div style="min-height: 60px">
            <a-skeleton active :paragraph="{rows: 15}" v-if="loading"/>
            <div v-else-if="data.length !== 0">
              	<a-table bordered size="small" class="table-stripe" :columns="columns" :rowKey="record => record.key" :dataSource="data" :pagination="false"></a-table>
            </div>
            <div v-else class="nodata"></div>
          </div>
	</Card>
</template>

<script>
	export default {
		name: 'TableHeadGroup',
		props: {
			columns: Array,
			data: Array
		},
		data() {
			return {
				loading: false
			}
		},
		methods: {
			formatTableData(data) {
		        const objs = {};
		        var k;
		        const arr1 = [];
		        for (let i = 0, len = data.length; i < len; i++) {
			        k = data[i].name;
			        if (objs[k])
			        	objs[k]++;
			        else
			        	objs[k] = 1
		        }
		        // 出现次数
		        for (let o in objs) {
		          	for (let i = 0; i < objs[o]; i++) {
		            	if (i === 0) {
		              		arr1.push(objs[o])
		            	} else {
		              		arr1.push(0)
		            	}
		          	}
		        }
		        arr1.forEach((r,index)=>{
		          	data[index]['rowSpan']= r;
		          	data[index]['key'] = index
		        });
		        return data
		    },
		},
		created() {
			this.formatTableData(this.data)
		},
		mounted() {
			console.log('parent:', this.$parent)
		}
	}
</script>
